/* 头部 */

.header {
    width: 100%;
    height: 100px;
}

.head {
    margin: auto;
    width: 1500px;
    height: 100px;
}


/* logo */

.head .logo {
    float: left;
    width: 133px;
    height: 40px;
}

.head .logo h2 {
    display: none;
}

.head img {
    margin-top: 28px;
}


/* 选择城市 */

.head .city {
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-left: 20px;
    padding-left: 20px;
    font-size: 16px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}


/* 城市小三角 */

.city-triangle {
    position: absolute;
    top: 48px;
    left: 65px;
    width: 0;
    height: 0;
    border-top: 5px solid #262426;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    transform-origin: 50% 25%;
    transition: all .2s;
}

.head .city:hover .city-triangle {
    transform: rotate(180deg);
}

.head .city:hover .city-list {
    display: block;
}

.head .city:hover .city-shelter {
    display: block;
}


/* 头部-选择城市-隐藏列表 */

.head .city-shelter {
    display: none;
    z-index: 11;
    position: absolute;
    top: 95px;
    left: 0;
    width: 98px;
    height: 10px;
    background-color: rgb(255, 255, 255)
}

.head .city-list {
    overflow: auto;
    box-sizing: border-box;
    display: none;
    z-index: 10;
    position: absolute;
    top: 100px;
    left: -1px;
    width: 480px;
    height: 330px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.head .city-list h3 {
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
    height: 69px;
    line-height: 69px;
    border-bottom: 1px solid #ccc;
}

.city-list-A {
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 20px;
    width: 460px;
    line-height: 1.8em;
    clear: both;
}

.city-list-A h4 {
    float: left;
    margin: 7px 10px 0 0;
    padding: 0 3px;
    line-height: 1em;
    background-color: #ccc;
}

.city-list-A ul {
    float: left;
    width: 385px;
}

.city-list-A ul li {
    float: left;
    margin-right: 10px;
}


/* 头部导航栏 */

.head-list {
    float: left;
    width: 630px;
    height: 100px;
}

.head .head-list ul li {
    float: left;
    width: 90px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
}

.head .head-list ul li a {
    width: 90px;
    height: 100px;
}

.head-list ul li:nth-of-type(2) {
    background-color: #ef4238;
    color: #fff !important;
}

.head .city:hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.head-list ul li:hover {
    color: #ef4238;
}


/* 头部-APP下载 */

.head-app {
    box-sizing: border-box;
    position: relative;
    float: left;
    margin: 0 15px 0 35px;
    padding-left: 20px;
    width: 140px;
    height: 100px;
    line-height: 100px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.head-app i {
    display: inline-block;
    width: 15px;
    height: 24px;
    vertical-align: middle;
    background: url(../sources/icon/phone.png) no-repeat 0 0;
}


/* APP小三角 */

.app-triangle {
    position: absolute;
    top: 48px;
    left: 115px;
    width: 0;
    height: 0;
    border-top: 5px solid #262426;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    transform-origin: 50% 25%;
    transition: all .2s;
}


/* 头部-app下载  hover效果 */

.head-app:hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.head-app:hover .app-triangle {
    transform: rotate(180deg);
}


/* 隐藏的app二维码 */

.head-app-erweima {
    z-index: 10;
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: 100px;
    left: -1px;
    width: 140px;
    height: 200px;
    text-align: center;
    border: 1px solid #ccc;
    border-top: 0;
    line-height: 1.2em !important;
    background-color: #fff;
}

.head-app-erweima p {
    margin-top: 20px;
    font-size: 14px;
}

.head-app-erweima span {
    font-size: 12px;
    color: #aaa;
}

.head-app:hover .head-app-erweima {
    display: block;
}


/* 头部-搜索栏 */

.head-search {
    box-sizing: border-box;
    float: left;
    margin-top: 25px;
    width: 280px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 25px;
}

.head-search input {
    float: left;
    margin-left: 20px;
    width: 206px;
    height: 46px;
    border: 0;
    background-color: transparent;
    outline: none;
}

.head-search button {
    float: left;
    width: 48px;
    height: 48px;
    border: 0;
    background-color: transparent;
    border-radius: 23px;
    cursor: pointer;
    background: url(../sources/icon/search.png) no-repeat 4px 4px #ef4238;
}


/* 头部-登录头像 */

.head-sculpture {
    box-sizing: border-box;
    position: relative;
    float: left;
    margin: 0 0 0 25px;
    width: 100px;
    height: 100px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    background: url(../sources/icon/denglu.png) no-repeat 10px 25px /50px 50px;
}


/* 头部-登录头像-小三角 */

.head-sculpture-triangle {
    position: absolute;
    top: 47px;
    left: 75px;
    width: 0;
    height: 0;
    border-top: 5px solid #262426;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    transform-origin: 50% 25%;
    transition: all .2s;
}

.head-sculpture-login {
    display: none;
    position: absolute;
    top: 100px;
    left: -1px;
    width: 98px;
    height: 69px;
    line-height: 69px;
    text-align: center;
    font-size: 14px;
    color: #aaa;
    border: 1px solid #ccc;
    border-top: 0;
    background-color: #fff;
}

.head-sculpture-login a:hover {
    color: #ef4238;
    text-decoration: underline;
}

.head-sculpture:hover .head-sculpture-triangle {
    transform: rotate(180deg);
}

.head-sculpture:hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.head-sculpture:hover .head-sculpture-login {
    display: block;
}


/* 导航栏 */

.nav {
    width: 100%;
    height: 75px;
    background-color: #47464a;
}

.nav-list {
    position: relative;
    margin: auto;
    width: 516px;
    height: 75px;
    line-height: 75px;
    text-align: center;
}

.nav-list ul li {
    float: left;
    width: 172px;
    height: 75px;
    color: #778f99;
}

.nav-list ul li:nth-of-type(1) a {
    color: #ef4238 !important;
}

.nav-list ul li a:hover {
    color: #ffffff;
}


/* 导航栏小三角 */

.triangle {
    position: absolute;
    top: 55px;
    left: 75px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(255, 255, 255);
    border-left: 10px solid transparent;
}


/* 分类菜单 */

.menu {
    box-sizing: border-box;
    margin: 45px auto 0;
    width: 1400px;
    /* height: 280px; */
    border: 1px solid #ccc;
}

.menu-list1 {
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #ccc;
}

.menu-list1 h4 {
    float: left;
    margin-top: 5px;
    width: 64px;
    color: #999;
}

.menu-list1 ul {
    float: left;
    width: 1270px;
}

.menu-list1 ul li a {
    float: left;
    margin-right: 25px;
    padding: 0 10px;
    line-height: 28px;
}

.menu-list1 ul li a:hover {
    color: #ef4238;
}

.menu-list1:last-of-type {
    border-bottom: 0;
}

.menu-list1 ul li:nth-of-type(1) a {
    color: #fff !important;
    background-color: #f34d4e;
    border-radius: 16px;
}


/* 排序按钮 */

.sort {
    margin: 50px auto 0;
    width: 1400px;
    height: 50px;
}

.sort label {
    display: block;
    float: left;
    margin-right: 20px;
    width: 110px;
    height: 20px;
}

.sort label i {
    box-sizing: border-box;
    display: block;
    margin-right: 5px;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

input[type="radio"] {
    display: none;
}

#sort-radio1:checked~.sort label:nth-of-type(1) i {
    border: 4px solid #ef4238;
}

#sort-radio2:checked~.sort label:nth-of-type(2) i {
    border: 4px solid #ef4238;
}

#sort-radio3:checked~.sort label:nth-of-type(3) i {
    border: 4px solid #ef4238;
}


/* 切换电影列表 */

#sort-radio1:checked~.movie-main .movie-list1 {
    display: block !important;
}

#sort-radio2:checked~.movie-main .movie-list2 {
    display: block;
}

#sort-radio3:checked~.movie-main .movie-list3 {
    display: block;
}


/* 电影列表 */

.movie-main {
    margin: auto;
    width: 1400px;
    height: 2000px;
}

.movie-list {
    position: absolute;
    margin: auto;
    width: 1400px;
}

.movie-list1 {
    display: none;
}

.movie-list2 {
    position: absolute;
    display: none;
}

.movie-list3 {
    position: absolute;
    display: none;
}

.movie-list ul li {
    position: relative;
    float: left;
    margin: 0 34px 40px 0;
    width: 204px;
    height: 360px;
    text-align: center;
}

.movie-list ul li:nth-of-type(6n) {
    margin-right: 0;
}

.movie-list ul li a img {
    width: 204px;
    height: 276px;
}

.movie-list ul li h5 {
    margin: 12px 0 18px 0;
}

.movie-list ul li a span {
    color: #ffb400;
}

.movie-list ul li:hover .movie-list-hover {
    display: block;
}


/* 电影列表的 hover效果 */

.movie-list-hover {
    display: none;
    z-index: 10;
    position: absolute;
    top: -50px;
    left: -33px;
    width: 270px;
    text-align: left;
    height: 357px;
    background-color: rgb(255, 255, 255);
    box-shadow: #ccc 0 0 20px;
}

.movie-list-hover-img {
    overflow: hidden;
    width: 270px;
    height: 185px;
}

.movie-list-hover-img img {
    width: 270px;
    height: 357px;
}

.movie-list-hover p {
    margin-left: 15px;
    line-height: 1.8em;
}

.movie-list-hover p span {
    color: #999;
}

.movie-list-hover p:nth-of-type(1) {
    margin-top: 20px;
    font-size: 20px;
}

.movie-list-hover p:nth-of-type(1) span {
    margin-left: 150px;
    color: #ffb400;
    font-size: 24px;
    font-style: italic;
}


/* 分页按钮 */

.movie-btn {
    margin: 30px auto 100px;
    width: 221px;
    height: 42px;
    clear: both;
}

.movie-btn ul li a {
    box-sizing: border-box;
    float: left;
    margin-right: 15px;
    width: 42px;
    height: 42px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #ccc;
}

.movie-btn ul li:nth-of-type(1) a {
    color: #fff;
    background-color: #ef4238;
}

.movie-btn ul li:last-of-type a {
    width: 92px;
}


/* 底部 */

.footer {
    box-sizing: border-box;
    padding-top: 68px;
    width: 100%;
    height: 465px;
    background-color: #262426;
}

.footer-cont {
    margin: auto;
    width: 925px;
    height: 320px;
    color: rgb(211, 207, 207);
    text-align: center;
    line-height: 1.5em;
}

.footer-cont p a:hover {
    text-decoration: underline;
}

.footer-cont p:nth-of-type(1) a {
    color: #ef4238;
}

.footer-cont i {
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
}

.footer-img {
    margin-top: 25px;
}